<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>主页</title>
		<link rel="stylesheet" href="frozenui-master/css/frozen.css">
        <link rel="stylesheet" href="frozenui-master/demo/demo.css">
        <script src="frozenui-master/lib/zepto.min.js"></script>
        <script src="frozenui-master/js/frozen.js"></script>
        <style>
        	*{
        		padding: 0;
        		margin: 0;
        	}
        	body{
        		background: rgb(229,229,229);
        	}
        	.ui-tab-content{
        		margin-top: 0;
        		border-top: none;
        		padding-bottom: 120px;
        	}
        	.ui-tab-nav li.current {
			    color: #00a5e0;
			    border-bottom: 5px #00a5e0 solid;
			}
        	.ui-tab-nav{
        		min-width: 750px;
        		height: 72px;
        	}
        	.ui-tab-nav>li{
        		height: 100%;
        		display: block;
        		font-size: 30px;
        		text-align: center;
        		line-height: 70px;
        	}
        	#slider .ui-slider-indicators{
        		height: 49px;
        		width: 100%;
        		background: rgba(0,0,0,0.5);
        		bottom: 0;
        		right: 0;
        	}
        	#slider .ui-slider-indicators>li{
        		margin-top: 22px;
        		border: 1px solid #fff;
        	}
        	#slider .ui-slider-indicators>li.current::before{
        		width: 3px;
        		height: 3px;
        	}
        	.box{
        		height: 500px;
        		background: #fff;
        		/*width: 750px;
        		margin-left: 50%;
        		-webkit-transform: translateX(-50%);*/
        	}
        	.box>li{
        		position: relative;
        		display: block;
        		width: 120px;
        		height: 122px;
        		margin-right: 95px;
        		float: left;
        		margin-top: 34px;
        		border-radius: 15px;
        		text-align: center;
        		line-height: 300px;
        		margin-bottom: 30px;
        		font-size: 28px;
        		color: #635755;
        	}
        	.box>li img{
        		position: absolute;
        		width: 65px;
        		height:66px;
        		margin-left: 50%;
        		margin-top: 50%;
        		-webkit-transform: translate(-50%,-50%);
        	}
        	#first{
        		margin-left: 95px;
        	}
        	a{
        		cursor: pointer;
        	}
        	#slider2 .ui-slider-indicators{
        		margin-right: 48%;
        	}
        	#slider2 .ui-slider-indicators>li{
        		width: 10px;
        		height: 10px;
        	}
        	#slider2 .ui-slider-indicators>li.current::before{
        		width: 8px;
        		height: 8px;
        	}
        	#title{
        		margin-left: 50px;
        		height: 120px;
        		width: 120px;
        		color: #46bbbc;
        		font-size: 42px;
        		float: left;
        	}
        	#msg{
        		float: left;
        		width: 82%;
        		height: 120px;
        	}
        	#msg>li{
        		height: 50%;
        		width: 100%;
        		float: left;
        		font-size: 30px;
        		color: #635755;
        		line-height: 65px;
        	}
        	#msg>li::after{
        		content: "";
        		display: block;
        		width: 40px;
        		height: 40px;
        		border-radius: 50%;
        		background: #46bbbc;
        		margin-top: 15px;
        		margin-left: -30px;
        	}
        	.time{
        		float: left;
        		width: 20%;
        	}
        	#mes{
        		float: left;
        		width: 80%;
        		font-size: 30px;
        	}
        	#msgbox{
        		height: 120px;
        		background: #FFF;
        		padding: 20px 0;
        	}
        	#vrbox{
        		margin-top: 25px;
        	}
        	.mesbox-top{
        		position: relative;
        		height: 100px;
        		background: #fff;
        		border-bottom: 2px solid #46BBBC;
        	}
        	.mesbox-top-title{
        		position: absolute;
        		width: 22.2%;
        		height: 70px;
        		min-width: 167px;
        		background: #46BBBC;
        		bottom: 0;
        		font-size: 40px;
        		color: #fefcfc;
        		text-indent: 30px;
				line-height: 70px;
        	}
        	.mesbox-top>a{
        		position: absolute;
        		right: 32px;
        		font-size: 30px;
        		bottom: 17px;
        		color: #333;
	        }
	        .vrbox-content{
	        	height: 350px;
	        	background: white;
	        }
	        .vrbox-content ul li{
	        	width: 220px;
	        	height: 200px;
	        	background: white;
	        	float: left;
	        	margin-right: 17px;
	        	margin-top: 50px;
	        }
	        .vrbox-content-first{
	        	margin-left: 25px;
	        }
	        .vrbox-content>ul>li>p{
	        	font-size: 30px;
	        	color: #9a5dca;
	        	text-align: center;
	        }
	        .vrbox-content>ul>li img{
	        	width: 100%;
	        	height: 100%;
	        }
	        .workbox-content>ul{
	        	background: #fff;
	        }
	        .workbox-content>ul>li{
	        	display: block;
	        	position: relative;
	        	height: 250px;
	        	width: 90%;
	        	margin: 0px auto;
	        	border-bottom: 1px solid #aaa;
	        }
	        .workbox-con-left{
	        	position: absolute;
	        	width: 218px;
	        	height: 200px;
	        	top: 50%;
	        	-webkit-transform: translateY(-50%);
	        }
	        .workbox-con-right{
	        	position: absolute;
	        	left: 250px;
	        	height: 200px;
	        	background: white;
	        	top: 50%;
	        	-webkit-transform: translateY(-50%);
	        	width: 70%;
	        }
	        .con-right-t{
	        	position: relative;
	        	height: 150px;
	        }
	        .con-right-t>a{
	        	position: absolute;
	        	font-size: 28px;
	        	color: #222;
	        	top: 40px;
	        }
	        .con-right-b{
	        	height: 50px;
	        	font-size: 18px;
	        	color: #999;
	        }
	        .con-right-b p{
	        	float: left;
	        }
	        .watch{
	        	width: 100px;
	        	height: 50px;
	        	float: right;
	        	text-indent: 30px;
	        	background: url(img/眼睛.png) no-repeat;
	        	background-size: 28px 28px;
	        	background-position: 0px -3px;
	        }
	        .workbox-con-left img{
	        	width: 100%;
	        	height: 100%;
	        }
	        .ui-footer{
	        	height: 120px;
	        	background: #fff;
	        }
        </style>
	</head>
	<body>
			<div class="ui-tab" id="tab">
			    <ul class="ui-tab-nav ui-border-b">
			        <li class="current">首页</li>
			        <li>武陵</li>
			        <li>鼎诚</li>
			        <li>桃源</li>
			        <li>石门</li>
			        <li>澧县</li>
			        <li>临澧</li>
			    </ul>
			    <ul class="ui-tab-content" style="width:400%">
			        <li>
			        	<!--轮播图-->
			        	<div class="ui-slider" style="height:400px;background: white;" id="slider">
			    			<ul class="ui-slider-content" style="width: 400%;">
			        			<li><span style="background-image:url(img/p1.jpg)"></span></li>
			       				<li><span style="background-image:url(img/p2.jpg)"></span></li>
			        			<li><span style="background-image:url(img/p3.jpg)"></span></li>
			        			<li><span style="background-image:url(img/dgxz.jpg)"></span></li>
			   				</ul>
						</div>
						<!--选项卡-->
				            <div class="ui-slider"  id="slider2" style="height: 130px">
				                <ul class="ui-slider-content" style="width: 200%;height: 400px;">
				                    <li>
				                    	<ul class="box">
				                    		<li style="background: #ff8d3a;" id="first"><a><img src="img/默认部门.png"/></a><p>政务公开</p></li>
				                    		<li style="background: #7bbf0e;"><a><img src="img/工作.png"/></a><p>工作动态</p></li>
				                    		<li style="background: #3fafee;"><a><img src="img/更多.png"/></a><p>区县矩阵</p></li>
				                    		<li style="background: #fe633f;"><a><img src="img/语音.png"/></a><p>语音导览</p></li>
				                    		<li style="background: #74c501;" id="first"><a><img src="img/客流量.png"/></a><p>实时客流</p></li>
				                    		<li style="background: #fe6361"><a><img src="img/摄像头 (1).png"/></a><p>实时景区</p></li>
				                    		<li style="background: #3eaeee;"><a><img src="img/VR.png"/></a><p>VR常德</p></li>
				                    		<li style="background: #3ad4cc;"><a><img src="img/攻略 (1).png"/></a><p>攻略常德</p></li>
				                    	</ul>
				                    </li>
				                    <li>
				                    	<ul class="box">
				                    		<li style="background: #ff8d3a;" id="first"><a><img src="img/视频.png"/></a><p>视频常德</p></li>
				                    		<li style="background: #7bbf0e;"><a><img src="img/专题.png"/></a><p>专题活动</p></li>
				                    		<li style="background: #3fafee;"><a><img src="img/福利.png"/></a><p>旅游福利</p></li>
				                    	</ul>
				                    </li>
				                </ul>
				            </div>
						<div id="msgbox" >
							<div id="title">通知公告</div>
							<ul id="msg">
								<li>
									<div id="mes" class="ui-nowrap ui-whitespace">
						                <a href="javascript:void(0)">常德市旅游外事侨务局关于印发  《旅游安全生产重大》 </a>
						            </div>
						            <div class="time">[08-06]</div>
								</li>
								<li>
									<div id="mes" class="ui-nowrap ui-whitespace">
										<a href="javascript:void(0)">常德市旅游外事侨务局关于印发  《旅游安全生产重大》 </a>
						           	</div>
						           	<div class="time">[08-07]</div>
								</li>
							</ul>
						</div>
						<div id="vrbox">
							<div class="mesbox-top">
								<div class="mesbox-top-title">VR常德</div>
								<a href="javascript:void(0)">更多>></a>
							</div>
							<div class="vrbox-content">
								<ul>
									<li class="vrbox-content-first"><a><img src="img/thy.jpg" ></a><p>桃花源</p></li>
									<li><a><img src="img/slgy.jpg" ></a><p>森林公园</p></li>
									<li><a><img src="img/hps.jpg" ></a><p>壶瓶山</p></li>
									<li><a><img src="img/hyx.jpg"></a><p>花岩溪</p></li>
								</ul>
							</div>
						</div>
						<div id="workbox">
							<div class="mesbox-top">
								<div class="mesbox-top-title">工作动态</div>
								<a href="javascript:void(0)">更多>></a>
							</div>
							<div class="workbox-content">
								<ul>
									<li>
										<div class="workbox-con-left">
											<img src="img/w1.png">
										</div>
										<div class="workbox-con-right">
											<div class="con-right-t"><a>市旅游外侨局组织枫林花海创建国家4A旅游景区景观质量评定初审</a></div>
											<div class="con-right-b">
												<p>法制网&nbsp;&nbsp;&nbsp;8月2日&nbsp;12:00</p>
												<div class="watch">12950</div>
											</div>
										</div>
									</li>
									<li>
										<div class="workbox-con-left">
											<img src="img/w2.png">
										</div>
										<div class="workbox-con-right">
											<div class="con-right-t"><a>市政府召开“搞活常德城市旅游”调研座谈会</a></div>
											<div class="con-right-b">
												<p>常德市政府&nbsp;&nbsp;&nbsp;7月15日&nbsp;13:00</p>
												<div class="watch">56950</div>
											</div>
										</div>
									</li>
									<li>
										<div class="workbox-con-left">
											<img src="img/w1.png">
										</div>
										<div class="workbox-con-right">
											<div class="con-right-t"><a>市旅游外侨局组织枫林花海创建国家4A旅游景区景观质量评定初审</a></div>
											<div class="con-right-b">
												<p>法制网&nbsp;&nbsp;&nbsp;8月2日&nbsp;12:00</p>
												<div class="watch">12950</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
			        </li>
			        <!--分栏-->
			        <li>武陵</li>
			    </ul>
			    <footer class="ui-footer">
			    	12312
			    </footer>
			</div>
		<script>
			(function (){
            var tab = new fz.Scroll('#tab', {
		        role: 'tab',
		        autoplay: false,
		        interval: 3000
		    });
		    /* 滑动开始前 */
		})();
		var slider = new fz.Scroll('#slider', {
                role: 'slider',
                indicator: true,
                autoplay: true,
                interval: 3000
            });
         var slider2 = new fz.Scroll('#slider2', {
                role: 'slider',
                indicator: true,
                autoplay: false,
            });
		</script>
	</body>
</html>
